<template>
    <orh-trees add="add" @on-add="moralAdd" reload @on-reload="reload(true)" del="del" @on-del="delConfirm">

        <Tree :data="trees" slot="trees" @on-select-change="loadChange"></Tree>

        <orh-sub-table slot="content">
            <Table border stripe :data="data" :columns="columns" highlight-row @on-selection-change="selectOne" :loading="tableload" slot="table"></Table>
        </orh-sub-table>

        <orh-sidebar v-model="shows" :title="titles" scale slot="others" adds="add" @on-adds="childAdd" dels="del" @on-del="childDel">
            <component :is="'RulesData'" :condition="condition" :majoritem="majoritem" @requery="requery" ref="childs"></component>
        </orh-sidebar>

        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" :majoritem="majoritem" @requery="requery"></component>
        </orh-sidebar>

    </orh-trees>
</template>
                
<script>
export default {
    name: 'dutymodule-dutycheckitem',
    components: {
        RulesData: resolve => {require(['./RulesData.vue'], resolve);},
        Operation: resolve => {require(['./Operation.vue'], resolve);}
    },
    
    data () {
        return {
            shows: false,
            show: false,
            content: null,
            titles: null,
            tableload:false,
            data: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '检查项名称',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name= params.row.name.zh?params.row.name.zh:params.row.name.mn;
                        return h('div', name);
                       
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 250,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.majoritem = params.row.watchlists_id
                                        this.rulesData(params.row.watchlists_check_id)
                                    }
                                }
                            }, '检查细则'),
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'edit',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.UpdateData(params.row.watchlists_check_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: `您确定要删除这条德育项吗?`,
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.watchlists_check_id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, '删除')
                            ])
                        ]);
                    }
                },
            ],

            url: 'api/watchlists/v1/securityitem/list',
            delUrl: 'api/watchlists/v1/securityitem/del/',

            trees: [],
            treesurl: 'api/watchlists/v1/securityclass/list',

            del: [],
            condition: false,
            majoritem: null

        }
    },

    methods: {
        
        /************************************************************
         * 
         * 删除确认
         * 
         ************************************************************/
        delConfirm () {
            if (this.del.length) {
                this.$Modal.confirm({
                    title: '删除确认',
                    closable: true,
                    loading: true,
                    content: '您确定要删除这条数据吗?',
                    onOk: () => {
                        this.delSubmit ()
                    }
                })
            }
        },
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        childAdd () {
            this.$refs.childs.addData ()
        },
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        childDel () {
            this.$refs.childs.delConfirm ()
        },
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        moralAdd () {
            this.condition = false
            this.titles = '添加'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 单条删除
         * @param   {index}           要删除的id
         * 
         ************************************************************/
        remove (index) {
            this.del = []
            this.del.push(index)
            this.delSubmit()
        },
        
        /************************************************************
         * 
         * 批量删除选择
         * @param   {index}          选择的数据
         * 
         ************************************************************/
        selectOne (index) {
            this.del = []
            index.forEach(item => {
                this.del.push(item.watchlists_check_id)
            });
        },
        
        /************************************************************
         * 
         * 执行删除
         * 
         ************************************************************/
        delSubmit () {
            if(this.del.length == 0){
                this.$Message.info('请选择删除项')
                this.prompt = false
                return
            }
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl + this.del).then(val=>{
                if (val.code == 404) {
                    this.$Message.warning(val.message)
                } else {
                    this.reload  ()
                }
                this.$Modal.remove()
            }).catch(err => {
                this.$Modal.remove()
            })
        },
        
        /************************************************************
         * 
         * 当添加或修改数据成功后重新请求数据
         * @param   {state}           添加修改成功后返回状态
         * 
         ************************************************************/
        requery (state) {
            if(state == true){
                this.show = false
                this.shows = false
                this.reload()
            }
        },
        
        /************************************************************
         * 
         * 检查细则
         * @param   {index}           要修改的数据id
         * 
         ************************************************************/
        rulesData (index) {
            this.condition = index
            this.titles = '检查细则'
            this.shows = true
        },
        
        /************************************************************
         * 
         * 修改数据
         * @param   {index}           要修改的数据id
         * 
         ************************************************************/
        UpdateData (index) {
            this.condition = index
            this.titles = '修改'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 手动刷新
         * 
         ************************************************************/
        reload (state) {
            if (state) this.treesid = null
            this.data = []
            this.tableload = true
            this.queryData()
        },
        
        /************************************************************
         * 
         * 查询数据
         * 
         ************************************************************/
        queryData () {
            this.tableload = true;
            let params = {
                id: this.treesid
            }
            if (!this.treesid) delete params.id
            this.$http.get(this.url, { params }).then(val=>{
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
        
        /************************************************************
         * 
         * 选择树
         * @param   {data}        当前选择数据
         * 
         ************************************************************/
        loadChange (data){
            if (data.length) {
                this.treesid = data[0].value
            } else {
                this.treesid = null
            }
            this.reload ()
        },
        
        /************************************************************
         * 
         * 树数据
         * 
         ************************************************************/
        treesData () {
            this.$http.get(this.treesurl).then(val=>{
                this.trees = this.handelTrees (val.data)
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 树数据处理
         * @param   {data}        数据
         * 
         ************************************************************/
        handelTrees (data) {
            return data.map(el => {
                let obj = {
                    title: el.watchlists_name.zh?el.watchlists_name.zh:el.watchlists_name.mn,
                    value: el.watchlists_id,
                    expand: true,
                    loading: false,
                    children: this.handelTrees (el.childs)
                }
                if (!el.childs.length) {
                    delete obj.loading
                    delete obj.children
                }
                return obj
            })
        }
    },
    created () {
        this.reload ()
        this.treesData ()
    },
}
</script>

